<template>
  <div class="my-elupload">
    <h1>使用EL-upload测试图片上传的预览效果2</h1>
    <el-upload action="/your-upload-url"
               :auto-upload="false"
               :on-success="handleUploadSuccess"
               :before-upload="handleBeforeUpload"
               :on-preview="handlePreview"
               :file-list="fileList"
               list-type="picture"
               multiple>
      <el-button size="small" type="primary">选择图片</el-button>

    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img v-if="dialogImageUrl" :src="dialogImageUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: ''
    };
  },
  methods: {
    handleBeforeUpload(file) {
      console.log("1.handleBeforeUpload()----------------")
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('请选择图片文件');
      }
      return isImage;
    },
    handleUploadSuccess(response, file) {
      file.url = response.data.url; // 根据后端返回的数据设置图片URL
    },
    handlePreview(file) {
      console.log("2.handlePreview()----------------")
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>


<style>
.my-elupload {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
